<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色信息显示界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../res/layui/css/layui.css"  media="all">
    <style>
        input {
            height: 33px;
            line-height: 33px;
            padding: 0 7px;
            border: 1px solid #ccc;
            border-radius: 2px;
            margin-bottom: -2px;
            outline: none;
        }

        input:focus {
            border-color: #009E94;
        }
    </style>
</head>
<body>
<script src="../res/layui/layui.js" charset="utf-8"></script>
<script src="../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
<!--<script>
    $(function(){
        $("#select").click(function(){
            table2.reload({
                url:'../../Role/findAll',
                where: {
                    roleName: $("#one").val(),
                },
                page: { curr: 1 }
            });
        })
    })
</script>-->
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div>
        <button class="layui-btn" lay-event="add">增加数据</button>
    搜索： <input id="one" type="seach" placeholder="输入关键字" autocomplete="off" style="width: 120px;"/>
    <button class="layui-btn" lay-event="btn-search">&nbsp;&nbsp;搜索&nbsp;&nbsp;</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    {{# if(d.roleId!='4028ab296da95d7e016da96c2d73000a' && d.roleValidity!='无效'){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>
    {{# } else{}}
    <a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="edit" >编辑</a>
    <a class="layui-btn layui-btn-disabled layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
</script>

<!--<script type="text/html" id="roleValidity">-->
<!--{{# if(d.roleValidity!='有效') { }}-->
<!--<input type="checkbox" name="sex" value="{{d.roleId}}" lay-skin="switch" lay-text="是|否" lay-filter="sexDemo" {{ d.roleValidity == 1 ? 'checked' : '' }}>-->
<!--{{# } else{}}-->
<!--<input type="checkbox" name="sex" value="{{d.roleId}}" disabled="" lay-skin="switch" lay-text="是|否" lay-filter="sexDemo" {{ d.roleValidity == 1 ? 'checked' : '' }}>-->
<!--{{# } }}-->
<!---->
<!--</script>-->
<script src="../res/js/tools.js" charset="utf-8"></script>

<script>

    //全局同步
    $.ajaxSetup({
        async:false
    });

    var table2 = "";
    layui.use('table', function(){
        var table = layui.table
            ,form = layui.form;
        table2 = table.render({
            elem: '#test'
            ,url:'../../Role/findAll'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '角色数据表'
            ,cols: [[
                {field:'roleId', hide:'true' , title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
                ,{field:'roleName', title:'角色名称', width:120 ,  fixed: 'left'}
                ,{field:'roleNote', title:'备注', width:120}
                ,{field:'roleTime', title:'创建时间', width:120,templet: "<div>{{layui.util.toDateString(d.roleTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });
        var userId = getQueryString("userId");
        //是否选中事件
        form.on('switch(sexDemo)', function(obj){
            var look=0;
            //layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            if(obj.elem.checked==true){
                look=1;
            }else{
                look=0;
            }
            var url="../../Role/updateRolevalidity";
            var data={roleId:this.value,roleValidity:look};
            $.post(url,data,function(obj){
                if(obj.state==1){
                    layer.msg('操作成功');
                    table2.reload();
                }
            });
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delAll':
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    $.each(data,function(index,item){
                        if(item.roleValidity==1){
                            var url="../../Role/updateRolevalidity";
                            var data={roleId:item.roleId,roleValidity:0};
                            $.post(url,data);
                            layer.msg("修改成功");
                            table2.reload();
                        }
                    })
                    break;
                case 'add'://新增数据
                    layer.open({
                        type: 2,
                        title: '角色界面编辑',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['580px', '90%'],
                        content: 'Rleinsert.html?userId='+userId, //iframe的url
                        end:function(){
                            table2.reload();
                        }
                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
                case 'btn-search' :
                    table2.reload({
                        url:'../../Role/findAll',
                        where: {
                            roleName: $("#one").val(),
                        },
                        page: { curr: 1 }
                    });
                    break ;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                if(data.roleValidity== '有效'){
                    var data={roleId:data.roleId,roleValidity:0};
                    layer.confirm('真的删除行么', function(index){
                        var url="../../Role/delete";

                        $.post(url,data,function(obj){
                            if(obj.state==1){
                                layer.msg("操作成功");
                            }
                            table2.reload();
                        })
                    });
                }
            }else if(obj.event === 'edit'){
                if(data.roleValidity=="有效"){
                    layer.open({
                        type: 2,
                        title: '角色界面编辑',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['580px', '90%'],
                        content: 'Rleinsert.html?id='+data.roleId, //iframe的url
                        end:function(){
                            table2.reload();
                        }
                    });
                }
            }
        });

    });
</script>
</body>
</html>